<template>
  <div>
    <!-- <div style="align-items: center;height: 70px;"> -->
    <div style="align-items: center;width: 375px;">
    <div class="nav">
      <router-link to="/">收入</router-link> |
      <router-link to="/home2">支出</router-link>
    </div>
    </div>
   <div style="font-size:18px ; text-align: left; font-weight: bold; padding-left: 10px; width: 365px; height: 270px">商户之家
     <div class="container">
      <div class="home">  
      <!-- <img :src="imageSrc" alt="示例图片" class="image" /> -->
      <!-- <img :src="../assets/logo2.jpg" alt="示例图片" class="image" /> -->
      <img v-bind:src="require('@/assets/logo2.jpg')" alt="示例图片" class="image" />
      <p class="text">{{ text }}</p>
      </div>
      <div class="component"></div>
      <button @click="handleButtonClick" class="white-button">
        <div style="font-size:16px ;white-space: nowrap; text-align: left;">月累计营业额</div>
        <div style="font-size:32px ;white-space: nowrap; ">{{ monthlyRevenue }}<span style="font-size:16px">元</span></div>
      </button>
      <!-- <button @click="handleButtonClick" class="white-button" id="revenue-button"></button> -->
      <div class="component"></div>
      <div class="home">
        <button @click="handleButtonClick1" class="blue-button">
          <div style="font-size:16px ;white-space: nowrap; text-align: left;">当日交易额</div>
          <div style="font-size:32px ;white-space: nowrap; ">{{ dayRevenue }}<span style="font-size:16px">元</span></div>
        </button>
        <!-- <button @click="handleButtonClick" class="blue-button">
          <span>交易</span>
          <span>明细</span>
        </button> -->
        <div class="component1"></div>
        <!-- <van-button type="primary">主要按钮</van-button> -->
        <button @click="handleButtonClick2" class="red-button">
          <div style="font-size:16px ;white-space: nowrap; text-align: left;">当日交易单数</div>
          <div style="font-size:32px ;white-space: nowrap; ">{{ daycount }}<span style="font-size:16px">笔</span></div>
        </button>
      </div>
      
        <!-- <div class="home" >       -->
        <!-- <van-button plain type="info" @click="showFormHandler">设定目标</van-button>
        <div class="component1"></div>
        <van-button plain type="info">生成报告</van-button>    -->
    </div>       
    <div style="display: flex; justify-content: flex-end;">
      <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="showFormHandler"
        >
          <template #reference>
            <van-button type="default" size="large" >功能选择</van-button>
          </template>
      </van-popover>  
    </div>
      
      
   
    
      <van-form v-if="showForm" >
        <van-field
        v-model="goal"
        type="number"
        name="目标"
        label="目标"
        placeholder="目标"
        :rules="[{ required: true, message: '请填写目标' }]"
        />            
        <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="handleSubmit">提交</van-button>
        </div>
      </van-form>
      <div class="component"></div>
      <div class="component" v-if="showChart"></div>
      
    <!-- <div id="chart" style="width: 100%; height: 400px;"></div>             -->
    <div ref="chart" id="chart" style="width: 375px; height: 400px;"></div>
   </div>
  </div>     
</template>






<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
import *as echarts from 'echarts'
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  name: "pieChartRadius",
  props: {
    valBox: Object
  },

  data() {
    return {
      //  气泡弹出框
      showPopover: false,
      actions: [{ text: '设定目标' }, { text: '生成报告' }],
      // 按钮数据
      year: '',
      month: '',
      totalValue:0,
      monthlyRevenue: 0 ,// 初始化为0
      dayRevenue:0,
      daycount:0,
      // 百分比图
      showForm: false,
      showChart: false,
      goal: '',
      
      // imageSrc: 'E:/knowledge/junior/enterprise/工商/230711前端/file/src/assets/logo2.jpg', // 替换为实际图片的URL
      text: '账户昵称', // 替换为实际的文字内容
      targetValue: 0, // 弹窗输入的value
     
    };
  },
  // http::113.106.111.75:8081/merchanthome/daily-total?year='+ year +'&month='+month
  computed: {},
  watch: {},
  filters: {},
  created() {},
  async mounted() {
      // url:'',
      const currentDate = new Date();
      this. year = currentDate.getFullYear();
      this. month = currentDate.getMonth() + 1; // getMonth()返回的是0-11，所以要加1
      this. day = currentDate.getDate();
      // this.regex = /\d+(\.\d+)?/;
      await this.getData();//月营业额
      await this.getData1();//交易额
      await this.getData2();//交易单数
      await this.getData3();//年营业额
      await this.getData4();//目标值
      // this.sendData();
      // this.dataProcessing();
      // this.handleSubmit();
      this.showForm = false;
      // console.log(this.$refs.myForm.fields[0].value); // 输出 goal 值
      // console.log(this.goal); // 输出 goal 值
      // // 获取目标值
      // const goalValue = this.goal;
      // // 创建图表
      // this.chart = echarts.init(document.getElementById('chart'));
      // await this.sendData();
      // this.createchart();
  },
  methods: {
    handleButtonClick() {
      this.$router.push('/method')
    },
    handleButtonClick1() {
      this.$router.push('/detail')
    },
    handleButtonClick2() {
      this.$router.push('/compare')
    },
    // 传输数据到数据库
    // async sendData() {
    //   console.log('this.goal',this.goal)
    //   var data = {
    //     id: 1,
    //     target: parseFloat(this.goal) // Convert the target sales to a floating-point number
    //   };

    //   fetch("http://127.0.0.1:8080/merchanthome/yearly-targets", {
    //     method: "POST",
    //     headers: {
    //       "Content-Type": "application/json"
    //     },
    //     body: JSON.stringify(data)
    //   })
    //     .then(response => response.json())
    //     .then(data => console.log(data));
    // },
    // 连接数据库
    // 月累计营业额
    async getData() {           
          // const url = "http://127.0.0.1:8080/merchanthome/daily-total?year=2023&month=7&id=1"
          // const url = `http://127.0.0.1:8080/merchanthome/daily-total?year=${this.year}&month=${this.month}&id=1`;
          const url = `http://localhost:8080/merchanthome/daily-total?year=2023&month=7&id=1`;
          console.log('url',url)
          const data = await this.$http.get(
            url
          );
          // console.log('data',data.data.data);
          // console.log('data',data.data.data);
          // const datatrans = data.data.data.match(this.regex) ? parseFloat(data.data.data.match(this.regex)[0]):null;
          // this.monthlyRevenue = data.data.toFixed(2);
          // console.log('datatrans',datatrans );
          // this.monthlyRevenue = datatrans;
          this.monthlyRevenue = data.data.data.toFixed(2);
           
    },
    // 当日交易额
    async getData1(){   
          // const url1 = "http://127.0.0.1:8080/merchanthome/daily-sales?year=2023&month=7&id=1"
          // const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales?year=${this.year}&month=${this.month}&id=1`;
          const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales`;
          // console.log(url1)
          const  data1 = await this.$http.get(
            url1
          );
          // // console.log(data1)
          // const datatrans1 = data1.data.data.match(this.regex) ? parseFloat(data1.data.data.match(this.regex)[0]):null;
          // console.log('datatrans1',datatrans1.toFixed(2));
          // this.dayRevenue = datatrans1.toFixed(2);
          // // this.dayRevenue = data1.data.toFixed(2);
          // // console.log(this.dayRevenue);
          this.dayRevenue = data1.data.data.toFixed(2);
          this.monthlyRevenue = parseFloat(this.monthlyRevenue) + parseFloat(this.dayRevenue);
    },      
   // 当日交易单数       
    async getData2(){    
          // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&month=7&id=1"
          // const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=${this.year}&month=${this.month}&day=${this.day}&id=1`;
          const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count`;
          // console.log(url2)
          const  data2 = await this.$http.get(
            url2
          );
          // const datatrans2 = data2.data.data.match(this.regex) ? parseFloat(data2.data.data.match(this.regex)[0]):null;
          
          // console.log(data2)
          // console.log('datatrans2',datatrans2.toFixed(2));
          // this.daycount = datatrans2;
          this.daycount = data2.data.data;
   }, 
  // 年度营业额       
  async getData3(){    
          // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&id=1"
          // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=${this.year}&id=1`;
          const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=2023&id=1`;
          // console.log(url2)
          const  data3 = await this.$http.get(
            url3
          );
          // console.log(data2)
          // this.totalValue = data3.data;
          // const datatrans3 = data3.data.data.match(this.regex) ? parseFloat(data3.data.data.match(this.regex)[0]):null;
          // console.log(data3.data)
          // const datatrans3 = data3.data.toFixed(2);
          // // this.totalValue = parseFloat(data3.data)+parseFloat(this.dayRevenue);
          // this.totalValue = datatrans3;
          // // console.log(this.totalValue );
          this.totalValue = data3.data.data;
  },
  // 获取目标值
  async getData4(){    
          // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&id=1"
          // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=${this.year}&id=1`;
          const url4 = `http://127.0.0.1:8080/merchanthome/gettarget?id=1`;
          // console.log(url2)
          const  data4 = await this.$http.get(
            url4
          );
          console.log('data4',data4.data.code);
          this.havedata = data4.data.code;
          if(this.havadata=1){
            // 获取目标值
            const goalValue = this.goal;
            // 创建图表
            this.chart = echarts.init(document.getElementById('chart'));
            this.goal = data4.data.data;
            this.createchart();
          }
          // const datatrans4 = data3.data.data.match(this.regex) ? parseFloat(data3.data.data.match(this.regex)[0]):null;
          // this.totalValue = parseFloat(data3.data)+parseFloat(this.dayRevenue);
          // this.totalValue = datatrans4;
          // console.log(this.totalValue );
          // console.log()
  },  
    
    // 提交目标
    handleSubmit() {
      this.showForm = false;
      this.showChart = true;
      // console.log(this.$refs.myForm.fields[0].value); // 输出 goal 值
      // console.log(this.goal); // 输出 goal 值
      // // 获取目标值
      // const goalValue = this.goal;
      var data = {
        id: 1,
        target: parseFloat(this.goal) // Convert the target sales to a floating-point number
      };

      fetch("http://127.0.0.1:8080/merchanthome/yearly-targets", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => response.json())
        .then(data => console.log(data));
      this.createchart();
    },
    createchart(){
      // 获取目标值
      const goalValue = this.goal;
      // 创建图表
      this.chart = echarts.init(document.getElementById('chart'));
      // const chart = echarts.init(document.getElementById('chart'));
      // this.chart.setOption(option);
      // this.chart.setOption({
      //   show: false
      // });
      // 配置图表
      const option = {
        title: {
          text: '年目标营业额完成进度',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          // data: ['A', 'B', 'C', 'D', 'E'],
          show:true,
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            animation: false, // 取消动画
            label: {
              // show: false,
              show:true,
              position: 'center',
              // position: 'inner',
              formatter: '{d}%',
              fontSize: 30,
              fontWeight: 'bold',
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
            //静态已完成数据
            // data: [
            //   { value: 335, name: 'A' },
            //   { value: 310, name: 'B' },
            //   { value: 234, name: 'C' },
            //   { value: 135, name: 'D' },
            //   { value: 1548, name: 'E' },
            // ],
          },
        ],
      };

      // 计算现有静态已完成数据的和
      // this.totalValue = option.series[0].data.reduce((sum, dataItem) => {
      //     return sum + dataItem.value;
      //   }, 0);

      // 数据库数据
      this.getData3();
      console.log(this.totalValue)
      // 更新 data 属性为 goalValue 和现有数据的和
      option.series[0].data = [
        { value: goalValue-this.totalValue, name: '待完成' },
        { value: this.totalValue, name: '已完成' }
      ];
      // // 设置圆环中心的文本
      // option.series[0].label.normal.formatter = function(params) {
      //   return '{d}%\n' + params.seriesName;
      // };

      
      this.chart.setOption(option);
      // 在这里可以将 goal 值提交到后台进行处理
    },
    onSubmit() {},
    // 表单
    showFormHandler() {
      // Toast(action.text);
      this.showForm = true;
    },
    // onSubmit() {
    //   // 在这里处理表单提交事件
    // },
    // 气泡
    onSelect(action) {
      Toast(action.text);
    },
  }
};
</script>

<!-- <style lang="less"> -->
<style scoped>
.home {
  display: flex;
  flex-direction: row;

}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;

}
.component {
  margin-bottom: 20px;
}

.component1 {
  margin-right: 10px;
}

.image {
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  margin-right: 10px; /* 设置图片与文字之间的水平间隔 */
}

.text {
  margin-top: 20px;
  font-size: 16px;
  /* color:white; */
  font-weight: bold;
}

.blue-button {
  display: inline-block;
  padding: 30px 30px;
  /* padding: 3rem 4rem; */
  /* margin: 1px; */
  /* margin: 15px 10px 10px 0px; */
  /* margin:0px; */
  background-color: rgb(24, 144, 255);
  color: white;
  border-radius: 5px;
  font-weight: bold;
}
.blue-button:hover {
  background-color: darkblue;
}
.blue-button:active {
  background-color: lightblue;
}

.red-button {
  display: inline-block;
  padding: 30px 30px;
  /* padding: 3rem 4rem; */
  /* margin: 1px; */
  background-color: rgb(255, 77, 79);
  color: white;
  border-radius: 5px;
  font-weight: bold;
}
.red-button:hover {
  background-color: darkred;
}
.red-button:active {
  background-color: lightred;
}

.white-button {
  display: inline-block;
  padding: 30px 90px;
  /* padding: 3rem 10rem; */
  background-color: white;
  border-radius: 5px;
  /* width: 80%; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: bold;
}
.white-button:hover {
  background-color: lightgray;
}
.white-button:active {
  background-color: lightgray;
}

/* 环形图 */
.boxImage {
  padding: 10px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  min-height: 54px;
}
.echartsStyle {
  width: 440px;
  height: 500px;
}
.pieChartRadius {
  position: relative;
  border-top: 0;
  margin-bottom: 30px;
  width: 100%;
  background: #ffffff;
  border-radius: 0;
  padding: 0px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  justify-content: center;
  align-items: center;
}

.pieChartRadius2 {
  /* height: 500px;  */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


.nav {
  padding: 30px;
}

.nav a {
  font-weight: bold;
  color: #2c3e50;
}

.nav a.router-link-exact-active {
  /* color: #42b983; */
  color: white;
}
</style>


